<template>
  <div class="accountMessage">
		<div class="main">
				<div class="menu">
					<ul class="clearfix">
						<li><router-link :to="{path:'/accountMessage/basicInfo',query:{type:2,account:1}}" :class="{current:account==1}"><b class="ia_1"></b>基本信息</router-link></li>
						<li><router-link :to="{path:'/accountMessage/financialInfo',query:{type:2,account:2}}" :class="{current:account==2}"><b class="ia_1"></b>财务信息</router-link></li>
						<li><router-link :to="{path:'/accountMessage/withdrawal',query:{type:2,account:3}}" :class="{current:account==3}"><b class="ia_1"></b>收益提现</router-link></li>
						<li><router-link :to="{path:'/accountMessage/amendPsw',query:{type:2,account:4}}" :class="{current:account==4}"><b class="ia_1"></b>修改密码</router-link></li>
 					</ul>
				</div>
				<router-view/>
			</div>
  </div>
</template>
<script>
export default {
  name: "accountMessage",
  data() {
    return {
      account: 1,
      type: 2
    };
  },
  mounted() {
    this.account = this.$route.query.account;
  },
  watch: {
    $route(to, from) {
      this.account = this.$route.query.account;
    }
  }
};
</script>
<style>
.accountMessage {
  height: 100%;
}
.main {
  margin: 12px;
  margin-right: 0;
  background: #fff;
  height: 100%;
  overflow: auto;
  padding: 0;
}
.main .menu {
  width: 100%;
  background: #eeeeee;
  height: 45px;
}
.main .menu li {
  float: left;
  margin-right: 6px;
  position: relative;
}
.menu li b {
  width: 22px;
  height: 22px;
  display: block;
  background: url(/static/common/images/spp.png) no-repeat;
  position: absolute;
  top: 50%;
  margin-top: -11px;
  left: 22px;
}
.menu li b.ia_1 {
  background-position: left -94px;
}
.menu li b.ia_2 {
  background-position: -32px -94px;
}
.menu li b.ia_3 {
  background-position: -64px -94px;
}
.menu li b.ia_4 {
  background-position: -96px -94px;
}
.menu li a:link,
.menu li a:visited {
  font-size: 14px;
  color: #666;
  background: #e0e0e0;
  width: 130px;
  display: block;
  text-indent: 48px;
  height: 43px;
  line-height: 43px;
  border-top: 2px solid #e0e0e0;
}
.menu li a:hover,
.menu li a.current {
  color: #fa8b00;
  background: #fff;
  border-top: 2px solid #fa8b00;
}
.menu li a.current b.ia_1,
.menu li a:hover b.ia_1 {
  background-position: left -62px;
}
.menu li a.current b.ia_2,
.menu li a:hover b.ia_2 {
  background-position: -32px -62px;
}
.menu li a.current b.ia_3,
.menu li a:hover b.ia_3 {
  background-position: -64px -62px;
}
.menu li a.current b.ia_4,
.menu li a:hover b.ia_4 {
  background-position: -96px -62px;
}
</style>
